<template>
  <div id="changeCity">
    <!-- 头部组件 -->
   <change-hedaer></change-hedaer>
   <!-- 城市组件 -->
   <city-list :cities="cities" :letter="letter"></city-list>
   <!-- 字母表组件 -->
   <city-alphabet :cities="cities" @change="changelist"></city-alphabet>
  </div>
</template>

<script>
import axios from 'axios'
import changeHedaer from './components/changeHeader.vue'
import cityList from './components/cityList.vue'
import cityAlphabet from './components/cityAlphabet.vue'
export default {
  name: 'changeCity',
  components:{
    changeHedaer,
    cityList,
    cityAlphabet
  },
  data(){
    return{
      cities:[],
      letter:''
    }
  },
  mounted() {
    this.getCity()
  },
  methods:{
    getCity(){
      axios.get('api/city.json')
      .then(this.getCitySucc)
    },
    getCitySucc(res){
      console.log(res)
      this.cities = res.data.city
    },
    changelist(letter){
      console.log("-------"+letter)
      this.letter = letter
    }
  }
};
</script>

<style scoped>

</style>
